<template>
  <el-container>
    <!--头部区-->
    <el-header>
      <div class="top-container">
        <div class="left">
          <img src="../assets/logo.png" alt="">
          <span>vue-shop电商运营后台系统</span>
        </div>
        <div class="right">
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              <img src="../assets/photo-head.jpg" alt="">{{userInfo}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>编辑资料</el-dropdown-item>
              <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-header>
    <!--主体区-->
    <el-container>
      <!--菜单区-->
      <el-aside :width="menuCollapse?'64px':'200px'">
        <!--动态菜单区-->
        <div class="toggle-botton" @click="menuOp">
          <i :class="menuCollapse? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </div>
        <!--动态菜单区-->
        <el-menu
          background-color="#222222"
          text-color="#fff"
          active-text-color="#409EFF"
          :unique-opened="true"
          :collapse="menuCollapse"
          :collapse-transition="false"
          :router="true"
          :default-active="activeMenu"
        >
          <!--一级菜单-->
          <el-submenu v-for="item in menulist" :key="item.id" :index="item.id + ''">
            <!--级菜单模板-->
            <template slot="title">
              <i :class="iconObj[item.id]"></i>
              <span>{{item.authName}}</span>
            </template>
            <!--二级菜单-->
            <el-menu-item v-for="items in item.children"  :key="items.id" :index="'/' + items.path" @click="setPath('/' + items.path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{items.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--右侧内容布局区-->
      <el-main>
        <!--子路由占位符-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      // 左侧菜单数据
      menulist: [],
      iconObj: {
        '125': 'iconfont icon-user',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-danju',
        '145': 'iconfont icon-baobiao'
      },
      // 是否展开菜单
      menuCollapse: false,
      // 当前激活两件
      activeMenu: '',
      // 用户信息
      userInfo:{}
    }
  },
  created() {
    this.getMenuList()
    this.getUserInfos()
    this.activeMenu = window.sessionStorage.getItem('subMenuPath')
  },
  methods: {
    loginOut() {
      window.sessionStorage.clear()
      this.$router.push('/Login')
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    async getMenuList() {
      const { data: res } = await this.$http.get('menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menulist = res.data
      console.log(res)
      console.log('我的菜单是', this.menulist)
    },
    menuOp () {
      this.menuCollapse = !this.menuCollapse
      console.log(this.menuCollapse)
    },
    setPath (para){
      window.sessionStorage.setItem('subMenuPath', para)
      this.activeMenu = window.sessionStorage.getItem('subMenuPath');
      console.log('当前激活的二级菜单是', para, this.activeMenu);
      
    },
    // 获取用户信息
    getUserInfos(){
      this.userInfo = window.sessionStorage.getItem('userInfo')
      console.log('打印用户的信息2', this.userInfo)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
}

.el-header {
  background: #222222;
}

.el-aside {
  background: #222222;
}

.el-main {
  background: #f2f2f2;
}

.top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;

  > .left {
    display: flex;

    > img {
      width: 40px;
      height: auto;
      margin-right: 20px;
    }

    > span {
      font-size: 24px;
      color: #ffffff;
    }
  }

  .right {
    display: flex;
    align-items: center;
    .el-dropdown{
      display: flex;
      .el-dropdown-link{
        display: flex;
        align-items: center;
        color: #ffffff;
        cursor: pointer;
        >img{
          width:40px;
          height: 40px;
          border-radius: 20px;
          margin-right: 15px;
        }
      }
    }
  }
}
.el-menu{
  //width: 200px;
  border: none;
}
.iconfont{
  padding-right: 5px;
  font-size: 20px;
}
.toggle-botton{
  padding: 10px 0;
  text-align: center;
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
}

</style>
